<template>
	<view class="Grid">
		<view class="Grid-Item" v-if="isShowCamera">
			<!-- <cover-image src="../static/upload.png"></cover-image> -->
			<UploadFileVue :showList="showList" :backgroundColor="'#FE5C71'">
				<up-icon name="camera-fill" color="#fff" size="40"></up-icon>
			</UploadFileVue>
		</view>
		<view class="Grid-Item" v-for="item in videolist" :key="item.id">
			<video 
				:src="item.url" 
				:poster="item.url + '?x-oss-process=video/snapshot,t_0,f_jpg'" 
				controls
				style="width: 100%;height: 100%;"
			></video>
			<view class="grid-dot" v-if="isShowDot">
				<u-icon v-if="item.flag" name="checkmark-circle" color="white" size="30" @click="add(item)"></u-icon>
				<view class="checkmark-circle" v-else @click="upd(item)">
					{{dynamicList && dynamicList.findIndex((e)=>{
						return 	e.url==item.url
					})+1}}
				</view>
			</view>
		</view>
		<view class="Grid-Item" v-for="item in imagelist" :key="item.id">
			<image :src="item.url" style="width: 100%;height: 100%;" mode="aspectFill"></image>
			<view class="grid-dot" v-if="isShowDot">
				<u-icon v-if="item.flag" name="checkmark-circle" color="white" size="30" @click="add(item)"></u-icon>
				<view class="checkmark-circle" v-else @click="upd(item)">
					{{dynamicList && dynamicList.findIndex((e)=>{
						return 	e.url==item.url
					})+1}}
				</view>
			</view>
		</view>
		<view class="Grid-Item" v-if="!isShowCamera">
			<UploadFileVue :showList="showList" :backgroundColor="'#F5F5F5'">
				<up-icon name="plus" color="#B5B5B5" size="40"></up-icon>
			</UploadFileVue>
		</view>
	</view>
	<u-popup :show="show" mode="bottom" :overlay="false" bgColor="#F4F4F4">
		<view class="popup">
			<view class="bottom">
				<view v-for="item in dynamicList" :key="item">
					<view class="small">
						<video v-if="item.type=='video'" class="imgs" :src="item.url"></video>
						<image v-else class="imgs" :src="item.url" mode="aspectFill" />
						<view class="del" @click="del(item)">
							<u-icon name="close-circle-fill" size="20"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="next" :style="{bottom:safeAreaBottom + 'rpx'}">
				<view class="choose_length">
					已选择 {{dynamicList.length}} 张
				</view>
				<view class="btn" @click="next">下一步({{dynamicList.length}})</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref
	} from 'vue'
	const dynamicList = ref([])
	const props = defineProps(['isShowCamera', 'showList', 'isShowDot'])
	const videolist = computed(() => {
		return props.showList.filter((item) => item.type==='video')
	})
	
	const imagelist = computed(() => {
		return props.showList.filter((item) => item.type!=='video')
	})
	
	const show = ref(false)
	
	// 修改选中的图片状态
	const upd = (e) => {
		e.flag = !e.flag
		dynamicList.value = dynamicList.value.filter((item) => {
			return item.url != e.url
		})
		if (dynamicList.value.length == 0) {
			show.value = false
		}
	}
	
	const add = (e) => {
		console.log(e, "| e");
		e.flag = !e.flag
		if (dynamicList.value.length >= 9) {
			uni.showToast({
				title: '最多添加9个',
			})
		} else {
			let object = {
				...e,
				id: dynamicList.value.length + 1
			}
			dynamicList.value.push(e)
			show.value = true
		}
	}
	
	const del = (e) => {
		e.flag = !e.flag
		dynamicList.value = dynamicList.value.filter((item) => {
			return item.url != e.url
		})
		if (dynamicList.value.length == 0) {
			show.value = false
		}
	}
	
	// 跳转
	const next = () => {
		console.log(dynamicList.value, "| dynamicList.value");
		uni.navigateTo({
			url: "/pages/tab-publish-content/issue/index?item=" + JSON.stringify(dynamicList.value)
		})
	}
</script>

<style lang="scss" scoped>
	.Grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: center;
		.Grid-Item {
			width: 225rpx;
			height: 225rpx;
			margin-left: 8rpx;
			margin-bottom: 20rpx;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			.grid-dot {
				position: absolute;
				top: 5px;
				right: 5px;
				.checkmark-circle {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					background-color: #FE5C71;
					color: white;
				}
			}
		}
	}
	.popup {
		width: 100vw;
		.bottom {
			display: flex;
			flex-wrap: wrap;
			margin-top: 30rpx;
			margin-bottom: 40rpx;
			.small {
				position: relative;
				.imgs {
					width: 136rpx;
					height: 136rpx;
					border-radius: 8rpx;
					margin-left: 20rpx;
				}
				.del {
					position: absolute;
					top: 8rpx;
					right: 6rpx
				}
			}
		}
	
		.next {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 60rpx;
			margin-right: 20rpx;
			margin-left: 20rpx;
			.choose_length {
				color: #9D9D9D;
			}
			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: rgb(254, 92, 113);
				border-radius: 30rpx;
				color: white;
				font-size: 24rpx;
				width: 144rpx;
				height: 56rpx;
			}
		}
	}
</style>